<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js " type="text/javascript" charset="utf-8"></script>
		<script src="js/element.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/element.css" />
	</head>
	<body>
		<div id="app">
			<div style="width: 400px;margin: 0 auto;">
				<el-card>
					<div v-for="(lt,index) in lts" :key="index">
						{{lt}}
					</div>
				</el-card>
				</el-row>
			</div>
			<el-input type="textarea" autosize placeholder="请输入内容" v-model="sc.message">
			</el-input>
			<el-button @click="fs()">发送</el-button>
		</div>
		<script type="text/javascript">
            var zullstr="http://192.168.10.58:11000/user-coach/"
		var cid = Math.floor(Math.random() * (100 - 1 + 1) + 1);
			var app = new Vue({
				el: "#app",
				data: {
					lts: [],
					sc: {
						cid:cid,
						message:"",
					},
				},
				created: function() {
					
				},
				methods: {
					fs:function(){
						var _this = this;
						$.ajax({ beforeSend: function (request) {
                                request.setRequestHeader("auth_token", $.cookie("auth_token"));},
							url:zullstr+"/fs",
							type:"post",
							dataType:"json",
							data:_this.sc,
							success:function(data){
								console.log(data);
							},
							error:function(data){
								
							}
						})
					}
				},
				watch: {

				}
			});

			var socket;
			if (typeof(WebSocket) == "undefined") {
				console.log("您的浏览器不支持websocket");
			} else {
				console.log("您的浏览器支持websocket");
				//实例化websocket对象
				socket = new WebSocket("ws://localhost:8000/websocket/" + cid);

				// 打开事件
				socket.onopen = function() {
					console.log("已经打开socket");
				}
				// 获得消息事件
				socket.onmessage = function(msg) {
					console.log(msg.data);
					app.lts.push(msg.data);
				}

				// 关闭事件
				socket.onclose = function() {
					console.log("Socket已关闭");
				}

				// 发生错误事假
				socket.onerror = function() {
					alert("Socket发生了错误");
				}
			}
		</script>
	</body>
</html>
